<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Monsters Wiki - Monster League</title>
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <!-- force webkit on 360 -->
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <!-- force edge on IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="msapplication-tap-highlight" content="no">
    <!-- force full screen on some browser -->
    <meta name="full-screen" content="yes"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
    <!-- force screen orientation on some browser -->
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <link rel="shortcut icon" type="image/x-icon" href="../static/favicon.ico">
    <link rel="bookmark" href="../static/favicon.ico"/>
    <link id="theme" rel="stylesheet" type="text/css" href="../static/css/default.css"/>
    <link href="../static/css/jquery-ui.css" rel="stylesheet">
    <script type="text/javascript" src="../static/js/resize.js"></script>
    <script type="text/javascript" src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.i18n.properties-min-1.0.9.js"></script>
    <script src="../static/js/jquery-ui.js"></script>
    <style>
        body {
            display: none;
        }
    </style>
</head>
<style>
    /* 强制一个高度，这样标签页就不会随着内容高度的改变而改变 */
    .ui-widget-header .ui-state-active,
    .ui-button.ui-state-active:hover {
        border: 0px solid #003eff;
        /*background: #007fff;*/
        /*font-weight: normal;*/
        /*color: #ffffff;*/
    }
</style>
<body class="content_background">
<header></header>
<section style="background-color: #eeeacf">
    <div id="intro" class="content_yellow_little_font margin-middle-top">
        <div id="tabs" class="tabs-bottom">
            <ul>
                <li><a href="#tabs-1">1</a></li>
                <li><a href="#tabs-2">2</a></li>
                <li><a href="#tabs-3">3</a></li>
                <li><a href="#tabs-4">4</a></li>
            </ul>
            <div class="tabs-spacer"></div>
            <div id="tabs-1">
                <div class="content_title">
                    <div class="title3" data-i18n-text="monsterleague_title_1">{monsterleague_title_1}</div>
                </div>
                <div class="content3">
                    <ul>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_1_1">{monsterLeague_content_1_1}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_1_2">{monsterLeague_content_1_2}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_1_3">{monsterLeague_content_1_3}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_1_4">{monsterLeague_content_1_4}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_1_5">{monsterLeague_content_1_5}</span>
                                <dl>
                                    <dd data-i18n-text="monsterLeague_content_1_5_sub_1">
                                        {monsterLeague_content_1_5_sub_1}
                                    </dd>
                                    <dd data-i18n-text="monsterLeague_content_1_5_sub_2">
                                        {monsterLeague_content_1_5_sub_2}
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_1_6">{monsterLeague_content_1_6}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="tabs-2">
                <div class="content_title">
                    <div class="title3" data-i18n-text="monsterleague_title_2">{monsterleague_title_2}</div>
                </div>
                <div class="content3">
                    <p>
                        <img src="../static/images/monsterAttribute.png" alt="" class="width_63">
                    </p>
                    <ul>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_2_1">{monsterLeague_content_2_1}</span>
                                <dl>
                                    <dd data-i18n-text="monsterLeague_content_2_1_sub_1">
                                        {monsterLeague_content_2_1_sub_1}
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_2_2">{monsterLeague_content_2_2}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_2_3">{monsterLeague_content_2_3}</span>
                                <dl>
                                    <dd data-i18n-text="monsterLeague_content_2_3_sub_1">
                                        {monsterLeague_content_2_3_sub_1}
                                    </dd>
                                    <dd data-i18n-text="monsterLeague_content_2_3_sub_2">
                                        {monsterLeague_content_2_3_sub_2}
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_2_4">{monsterLeague_content_2_4}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="tabs-3">
                <div class="content_title">
                    <div class="title3" data-i18n-text="monsterleague_title_3">{monsterleague_title_3}</div>
                </div>
                <div class="content3">
                    <ul>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_3_1">{monsterLeague_content_3_1}</span>
                                <dl>
                                    <dd data-i18n-text="monsterLeague_content_3_1_sub_1">
                                        {monsterLeague_content_3_1_sub_1}
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_3_2">{monsterLeague_content_3_2}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_3_3">{monsterLeague_content_3_3}</span>
                                <dl>
                                    <dd data-i18n-text="monsterLeague_content_3_3_sub_1">
                                        {monsterLeague_content_3_3_sub_1}
                                    </dd>
                                    <dd data-i18n-text="monsterLeague_content_3_3_sub_2">
                                        {monsterLeague_content_3_3_sub_2}
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_3_4">{monsterLeague_content_3_4}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_3_5">{monsterLeague_content_3_5}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_3_6">{monsterLeague_content_3_6}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_3_7">{monsterLeague_content_3_7}</span>
                                <dl>
                                    <dd data-i18n-text="monsterLeague_content_3_7_sub_1">
                                        {monsterLeague_content_3_7_sub_1}
                                    </dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_3_8">{monsterLeague_content_3_8}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="tabs-4">
                <div class="content_title">
                    <div class="title3" data-i18n-text="monsterleague_title_4">{monsterleague_title_4}</div>
                </div>
                <div class="content3">
                    <p>
                        <img src="../static/images/supportSponsor.png" alt="" class="width_63">
                    </p>
                    <ul>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_4_1">{monsterLeague_content_4_1}</span>
                                <dl>
                                    <dd data-i18n-text="monsterLeague_content_4_1_sub_1">{monsterLeague_content_4_1_sub_1}</dd>
                                </dl>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_4_2">{monsterLeague_content_4_2}</span>
                            </div>
                        </li>
                        <li>
                            <div class="nodeBox">
                                <span class="node"></span>
                            </div>
                            <div class="contentBox">
                                <span data-i18n-text="monsterLeague_content_4_3">{monsterLeague_content_4_3}</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="foot_space_small"></div>

</section>
<footer></footer>
<script>
    $(function () {
        $("#tabs").tabs();

        // 修改 class
        $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
            .removeClass("ui-corner-all ui-corner-top")
            .addClass("ui-corner-bottom");

        // 移动导航到底部
        $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
    });
    var home = {
        init: function () {
            loadProperties(default_lang);
        },
    };
    home.init();
</script>
</body>
</html>
